<template>
    <div class="container">
        <Breadcrumb :items="['menu.member', 'menu.member.address']" />
        <a-card :title="$t('menu.member.address')">

            <a-space fill direction="vertical">
                <a-row>
                    <a-col :flex="1">
                        <a-form :model="searchForm">
                            <a-row :gutter="16">
                                <a-col :span="3">
                                    <a-form-item field="phone" label="手机号" hide-label>
                                        <a-input v-model="searchForm.phone" placeholder="请输入手机号" allow-clear />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="3">
                                    <a-form-item field="user_id" label="用户ID" hide-label>
                                        <a-input v-model="searchForm.user_id" placeholder="请输入用户ID" allow-clear />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-space>
                                        <a-button type="primary" @click="search">
                                            <template #icon>
                                                <icon-search />
                                            </template>
                                            搜索
                                        </a-button>
                                        <a-button @click="reset">
                                            <template #icon>
                                                <icon-refresh />
                                            </template>
                                            重置
                                        </a-button>
                                    </a-space>
                                </a-col>
                            </a-row>
                        </a-form>
                    </a-col>
                </a-row>

                <a-table :data="renderData" :loading="loading" :bordered="{ cell: true }" :pagination="pagination"
                    @page-change="onPageChange" @page-size-change="onPageSizeChange">
                    <template #columns>
                        <a-table-column title="ID" data-index="id" :width="80" />
                        <a-table-column title="用户ID" data-index="user_id" :width="100" />
                        <a-table-column title="收货人" data-index="name" :width="120" />
                        <a-table-column title="手机号" data-index="phone" :width="150" />
                        <a-table-column title="省份" data-index="province" :width="100" />
                        <a-table-column title="城市" data-index="city" :width="100" />
                        <a-table-column title="区县" data-index="district" :width="100" />
                        <a-table-column title="详细地址" data-index="detail" :width="200">
                            <template #cell="{ record }">
                                <a-typography-paragraph :ellipsis="{ rows: 2, showTooltip: true }">
                                    {{ record.detail }}
                                </a-typography-paragraph>
                            </template>
                        </a-table-column>
                        <a-table-column title="默认地址" data-index="is_default_text" :width="100">
                            <template #cell="{ record }">
                                <a-tag :color="record.is_default ? 'green' : 'gray'">
                                    {{ record.is_default_text }}
                                </a-tag>
                            </template>
                        </a-table-column>
                        <a-table-column title="创建时间" data-index="created_at" :width="180" />
                        <a-table-column title="操作" align="center" :width="120">
                            <template #cell="{ record }">
                                <a-space size="mini">
                                    <a-popconfirm position="left" content="确定要删除这个地址吗？" @ok="handleDelete(record.id)">
                                        <a-link status="danger">
                                            删除
                                        </a-link>
                                    </a-popconfirm>
                                </a-space>
                            </template>
                        </a-table-column>
                    </template>
                </a-table>
            </a-space>
        </a-card>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { Message } from '@arco-design/web-vue';
import { useRoute } from 'vue-router';
import useLoading from '@/hooks/loading';
import { Pagination } from '@/types/global';
import { queryAddressList, delAddress, AddressRecord } from '@/api/address';

const route = useRoute();
const { loading, setLoading } = useLoading(true);

const basePagination = {
    current: 1,
    pageSize: 10,
    total: 0,
};

const pagination = reactive({
    ...basePagination,
});

const searchForm = reactive({
    phone: '',
    user_id: '',
});

const renderData = ref<AddressRecord[]>([]);

const fetchData = async () => {
    setLoading(true);
    try {
        const params: any = {
            current: pagination.current,
            pageSize: pagination.pageSize,
        };
        
        if (searchForm.phone) {
            params.phone = searchForm.phone;
        }
        
        if (searchForm.user_id) {
            params.user_id = searchForm.user_id;
        }
        
        const res = await queryAddressList(params);
        renderData.value = res.data.list;
        pagination.total = res.data.total;
    } catch (err) {
        Message.error('获取地址列表失败');
    } finally {
        setLoading(false);
    }
};

const search = () => {
    pagination.current = 1;
    fetchData();
};

const reset = () => {
    searchForm.phone = '';
    searchForm.user_id = '';
    search();
};

const onPageChange = (current: number) => {
    pagination.current = current;
    fetchData();
};

const onPageSizeChange = (pageSize: number) => {
    pagination.pageSize = pageSize;
    pagination.current = 1;
    fetchData();
};

const handleDelete = async (id: number) => {
    try {
        await delAddress(id);
        Message.success('删除成功');
        fetchData();
    } catch (err) {
        Message.error('删除失败');
    }
};

onMounted(() => {
    // 检查URL参数中是否有user_id
    const userIdFromQuery = route.query.user_id;
    if (userIdFromQuery) {  
        searchForm.user_id = userIdFromQuery as string;
    }
    fetchData();
});
</script>

<style scoped lang="less">
.container {
    padding: 0 20px 20px 20px;
}
</style>

<script lang="ts">
export default {
    name: 'MemberAddress',
};
</script>

